import '../index.scss'
import { useEffect, useState } from 'react'





interface Channel {
    id: number;
    name: string;
}

const App = () => {

    // useEffect基本使用
    const [data, setData] = useState<Channel[]>([])

    const URL = 'http://geek.itheima.net/v1_0/channels'
    useEffect(() => {
        const res = fetch(URL)

        res.then(res => res.json()).then(res => {
            console.log(res)
            setData(res.data.channels)
        })
    }, [])


    // useEffect 的依赖

    const [count, setCount] = useState(0)

    // 1. 没有依赖 初始 + 组件更新
    // useEffect(() => {
    //     console.log('副作用函数执行了')
    // })

    // 2. 传入空数组依赖 初始执行一次
    // useEffect(() => {
    //     console.log('副作用函数执行了')
    // }, [])

    // 3. 传入特定依赖 初始 + 依赖项变化执行
    useEffect(() => {
        console.log('副作用函数执行了')
    }, [count])


    return (
        <div className="app">
            <ul>
                {data.map(item => <li key={item.id}>{item.name}</li>)}
            </ul>
            <button onClick={() => setCount(count + 1)}>{count}</button>

        </div>
    )
}

export default App